<style lang='less'>
	th.unselected .cell.highlight {
		color: unset;
	}
</style>
<template>
	<div class="table-contain-inner">
		<div class="table-operate-area">
			<el-tooltip class="filter-item" effect="dark" content="只会导出当前筛选(排序)条件下的数据" placement="bottom-start">
				<el-button type="primary" @click="exportToExcel" :disabled="user_data.length==0" :loading="btn_loading_export">
					<i style="margin-right: 6%;" class="el-icon-document"></i>导出Excel
				</el-button>
			</el-tooltip>
			<el-input class="search-input filter-item" v-model="search_val" @keydown.native.13="searchHandle">
				<template slot="prepend">
					<el-select v-model="search_type">
				    <el-option value='id_num' label='工号'></el-option>
				    <el-option value='name' label='姓名'></el-option>
				  </el-select>
				</template>
				<template slot="append">
					<div class="search-append-div" @click="searchHandle">
						<i class="el-icon-search"></i>
					</div>
				</template>
			</el-input>
		</div>
		<el-table row-key="idNum" @filter-change="filterChangeHandle" v-loading="tb_loading" @sort-change="sortChangeHandle" :data="user_data">
			<el-table-column
	      label="工号"
	      min-width="100%"
	      prop="idNum">
	    </el-table-column>
	    <el-table-column
	      prop="name"
	      label="姓名">
	    </el-table-column>
	    <el-table-column
	    	min-width="110px"
	    	prop="birthdate"
	    	sortable
	      label="生日">
	    </el-table-column>
	    <el-table-column
	    	prop="sex"
	    	min-width="60px"
	    	column-key="sex"
	    	:filters="[{value:1,text:'男'},{value:2,text:'女'}]"
	    	:filter-multiple="false"
	      label="性别">
	      <template slot-scope="scope">
		      {{scope.row.sex==1?'男':scope.row.sex==2?'女':''}}
		    </template>
	    </el-table-column>
	    <el-table-column
	    	prop="phone"
	    	min-width="100%"
	    	:show-overflow-tooltip="true"
	      label="手机号">
	    </el-table-column>
	    <el-table-column
	    	prop="email"
	    	min-width="100%"
	    	:show-overflow-tooltip="true"
	      label="邮箱">
	    </el-table-column>
	    <el-table-column
	    	prop="job.department.name"
	    	min-width="100%"
	    	column-key="department_id"
	    	:filters="departments_filters"
	    	:filter-multiple="false"
	      label="部门">
	    </el-table-column>
	    <el-table-column
	      prop="job.name"
	      min-width="100%"
	      column-key="job_id"
	      :label-class-name="!this.filters['job_id'] ? 'unselected' : ''"
	    	:filters="jobs_filters"
	    	:filter-multiple="false"
	      label="职位">
	    </el-table-column>
	    <el-table-column
	    	min-width="110px"
	    	prop="createTime"
	    	sortable
	      label="创建时间">
	    </el-table-column>
	    <el-table-column
	    	prop="remark"
	    	:show-overflow-tooltip="true"
	      label="备注">
	    </el-table-column>
	    <el-table-column
	    	prop="status"
	    	min-width="80px"
	    	column-key="status"
	    	:filters="[{value:1,text:'在职'},{value:'0',text:'离职'}]"
	    	:filter-multiple="false"
	      label="状态">
	      <template slot-scope="scope">
		      {{scope.row.status==1?'在职':scope.row.status==0?'离职':''}}
		    </template>
	    </el-table-column>
	    <el-table-column
	    	min-width="160px"
	      label="操作">
	      <template slot-scope="scope">
      		<el-button type="text" class="btn-resolve" @click="editUser(scope.row)">修改</el-button>
			    <el-button type="text" class="btn-resolve" :loading="btn_loading_reset==scope.row.idNum" @click="resetUserPasswd(scope.row.idNum)">重置</el-button>
      		<el-button type="text" class="btn-resolve" :loading="btn_loading_delete==scope.row.idNum" @click="deleteUser(scope.row.idNum)">删除</el-button>
	      </template>
	    </el-table-column>
		</el-table>
		<el-pagination background :page-sizes="[5, 10, 20, 50]" :page-size.sync="page_size" layout="sizes, prev, pager, next, jumper" :page-count="page_total" :current-page.sync="page_no"></el-pagination>
		<editUser ref="edit_user_dialog" :departments="departments" @reloadTb="getUserData"></editUser>
	</div>
</template>
<script>
	import editUser from 'components/admin/edit_user';
	import { exportExcel } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				user_data: [],
				tb_loading: false,
				page_no: 1,
				page_total: 1,
				page_size: 10,
				departments: [],
				jobs_filters: [],

				search_type: 'id_num',
				search_val: '',

				filters: {},
				search_filters: {},

				btn_loading_delete: '',
				btn_loading_reset: '',
				btn_loading_export: false
			}
		},
		watch: {
			page_no() {
				this.getUserData();
			},
			page_size() {
				this.reloadTb();
			}
		},
		computed: {
			departments_filters() {
				this.setJobsFilter();
				return this.departments.map(val => {
					return {
						value: val.id,
						text: val.name
					}
				})
			}
		},
		methods: {
			editUser(user) {
				if(user) {
					user.departmentId = user.job.departmentId;
					this.$refs.edit_user_dialog.show(user);
				}
			},
			deleteUser(user_id) {
				if(user_id) {
					this.$confirm('删除该用户同时会删除其所有记录，确定?', '警告', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	        	this.btn_loading_delete = user_id;
	        	this.$axios.get('/admin/deleteUser/'+user_id).then(res => {
	        		if(res.s == 1) {
	        			this.$message.success('删除成功');
	        			this.getUserData();
	        		}
	        	}).finally(() => {
	        		this.btn_loading_delete = '';
	        	})
	        }).catch(() => {
	          this.$message.info('取消操作');          
	        });
				}
			},
			exportToExcel() {
				this.btn_loading_export = true;
				this.$axios_blob.get('/admin/exportUser', Object.assign({}, this.filters, this.search_filters)).then(res => {
					if(res && res.data) {
						let sheet_des = res.headers['content-disposition'];
						exportExcel(res.data, sheet_des.substr(sheet_des.indexOf('filename=')+9));
		    		this.$message.success('导出成功');
					}
				}).finally(() => {
					this.btn_loading_export = false;
				})
			},
			resetUserPasswd(user_id) {
				if(user_id) {
					this.$confirm('确定重置该用户的密码?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'info'
	        }).then(() => {
	        	this.btn_loading_reset = user_id;
	        	this.$axios.get('/admin/resetUserPasswd/'+user_id).then(res => {
	        		if(res.s == 1) {
	        			this.$message.success('重置成功');
	        		}
	        	}).finally(() => {
	        		this.btn_loading_reset = '';
	        	})
	        }).catch(() => {
	          this.$message.info('取消操作');          
	        });
				}
			},
			searchHandle() {
				this.search_filters = {};
				if(this.search_val) {
					this.search_filters[this.search_type] = this.search_val;
				}
				this.reloadTb();
			},
			setJobsFilter() {
				let department_filter_select = this.filters.department_id;
				let jobs = [], department={};
				if(department_filter_select) {
					for(department of this.departments) {
						if(department.id == department_filter_select) {
							jobs = department.jobs;
						}
					}
				}
				this.jobs_filters = jobs.length ? jobs.map(job => {
					return {
						value: job.id,
						text: job.name
					}
				}) : [];
			},
			getUserData() {
				this.tb_loading = true;
				this.$axios.get('/admin/userList/'+this.page_no+'/'+this.page_size, Object.assign({}, this.filters, this.search_filters)).then(res => {
					if(res.s == 1) {
						let res_data = res.d;
						this.page_total = res_data.page_count;
						this.user_data = res_data.list;
					}
				}).finally(() => {
					this.tb_loading = false;
				})
			},
			filterChangeHandle(filter){
				let filter_key = Object.keys(filter)[0];
				if(filter_key) {
					let filter_val = filter[filter_key][0];
					if(filter_val != undefined) {
						this.filters[filter_key] = filter_val;
					}else if(this.filters[filter_key]) {
						delete this.filters[filter_key];
					}
					if(filter_key == 'department_id') {
						if(this.filters['job_id'])
							delete this.filters['job_id'];
						this.setJobsFilter();
					}
				}
				this.reloadTb();
			},
			sortChangeHandle({ order, prop }) {
				if(order && prop) {
					this.filters.order_by = (prop=='createTime' ? 'create_time':prop)+' '+(order == 'ascending' ? 'asc' : 'desc');
				}else {
					delete this.filters.order_by;
				}
				this.reloadTb();
			},
			reloadTb() {
				if(this.page_no == 1) {
					this.getUserData();
				}else {
					this.page_no = 1;
				}
			}
		},
		components:{
			editUser
		},
		created() {
			this.getUserData();
			this.$axios.get('/admin/getDepartment').then(res => {
				if(res.s == 1) {
					this.departments = res.d;
				}
			})
		}
	}
</script>